import { Line, Group, Text, Platform, Box, Path, Pen } from "leafer-ui";
import { TextBox } from "../types";
import { createIndexLabel } from "./IndexLabel";
// export const createCombinedWaveLineUnderBoxes = (
//   boxes: Array<TextBox>,
//   offset = 1.5, // 默认偏移 5px,
// ) => {
//   // 按行分组 boxes
//   const rowsMap = new Map();
//   boxes.forEach((box) => {
//     console.log(box)
//     const key = `${box.data.pageIndex}-${box.data.rowIndex}`
//     if (!rowsMap.has(key)) {
//       rowsMap.set(key, []);
//     }
//     rowsMap.get(key).push(box);
//   });

//   // 创建 Group 容器
//   const waveGroup = new Group({
//     // 标记为按钮，子元素 Text 将自动同步交互状态 //
//     button: true,
//   });
//   const x = 6;
//   const amplitude = 0.5*x;
//   const wavelength = 1.5*x;
//   // 创建索引标签
//   waveGroup.add(
//     createIndexLabel({
//       textBox: boxes[0],
//       index: 9,
//     })
//   );
//   // 为每页的每一行创建波浪线
//   rowsMap.forEach((rowBoxes) => {
//     rowBoxes.sort((a, b) => a.x - b.x);

//     const wavePoints = [];
//     for (const box of rowBoxes) {
//       const { x, y, width, height } = box;
//       const segments = Math.floor(width / wavelength);

//       for (let i = 0; i <= segments * 2; i++) {
//         const offsetX = x + i * (wavelength / 2);
//         const offsetY = Math.sin(offsetX * (Math.PI / wavelength)) * amplitude;
//         const baseY = y + height + offset;
//         wavePoints.push(offsetX);
//         wavePoints.push(baseY + offsetY);
//       }
//     }

//     const waveLine = new Line({
//       points: wavePoints,
//       curve: true,
//       strokeWidth: 1,
//       stroke: "#26A555",
//       hittable: false,
//       // animation: {
//       //   // 沿 path 运动描边至 100%
//       //   style: { motion: { type: "percent", value: 1 } },
//       //   duration: 5,
//       //   // loop: true,
//       // },
//       // motionPath: true,
//       // motion: 0,
//       // cursor: "pointer",
//       // // hoverStyle:{
//       // //   shadow: {
//       // //     x: 0,
//       // //     y: 2,
//       // //     blur: 4,
//       // //     color: "#26A555",
//       // //   }
//       // // }
//     });
//     waveGroup.add(waveLine);
//   });
//   return waveGroup;
// };
export const createCombinedWaveLineUnderBoxes = (
  boxes: Array<TextBox>,
  offset = 10 // 默认偏移改为2px
) => {
  // 按页分组
  const pagesMap = new Map<number, TextBox[]>();
  boxes.forEach((box) => {
    const page = box.data.pageIndex;
    if (!pagesMap.has(page)) {
      pagesMap.set(page, []);
    }
    pagesMap.get(page)?.push(box);
  });

  const pageGroups: Group[] = [];

  pagesMap.forEach((pageBoxes, pageIndex) => {
    // 创建每页的Group容器
    const pageGroup = new Group({ button: true });
    // 段落的第一个字符创建索引标签
    if (pageIndex === 0) {
      pageGroup.add(
        createIndexLabel({
          textBox: pageBoxes[0],
          index: 9,
        })
      );
    }
    // 按行分组
    const rowsMap = new Map<number, TextBox[]>();
    pageBoxes.forEach((box) => {
      const row = box.data.rowIndex;
      if (!rowsMap.has(row)) {
        rowsMap.set(row, []);
      }
      rowsMap.get(row)?.push(box);
    });

    // 为每行创建波浪线
    rowsMap.forEach((rowBoxes) => {
      // 找到该行最大矩形（宽度最大）
      const maxWidthBox = rowBoxes.reduce((max, box) =>
        box.width > max.width ? box : max
      );

      // 计算行边界
      const minX = Math.min(...rowBoxes.map((b) => b.x));
      const maxX = Math.max(...rowBoxes.map((b) => b.x + b.width));
      const x = 3;
      // 波浪线参数
      const wavelength = 4.5 * x; // 波长
      const amplitude = 2; // 振幅
      const baseY = maxWidthBox.y + maxWidthBox.height + offset;

      // 生成波浪点
      const wavePoints: number[] = [];
      for (let x = minX; x <= maxX; x += wavelength / 4) {
        const y =
          baseY +
          Math.sin((x - minX) * ((2 * Math.PI) / wavelength)) * amplitude;
        wavePoints.push(x, y);
      }

      // 创建波浪线
      const waveLine = new Line({
        points: wavePoints,
        curve: true,
        strokeWidth: 2,
        stroke: "#26A555",
        hittable: false,
      });

      pageGroup.add(waveLine);
    });

    pageGroups.push(pageGroup);
  });

  return pageGroups; // 返回Group数组
};
